<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
import { ref, Ref, onMounted } from 'vue'

import { useECharts } from '@/hooks/web/useECharts'
import { propTypes } from '@/utils/propTypes'

defineProps({
  width: propTypes.string.def('100%'),
  height: propTypes.string.def('calc(100vh - 78px)')
})
const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
const dataAll = [389, 259, 262, 324, 232, 176, 196, 214, 133, 370]
const yAxisData = ['原因1', '原因2', '原因3', '原因4', '原因5', '原因6', '原因7', '原因8', '原因9', '原因10']
onMounted(() => {
  setOptions({
    backgroundColor: '#0f375f',
    title: [
      {
        text: '各渠道投诉占比',
        left: '2%',
        top: '1%',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      {
        text: '投诉原因TOP10',
        left: '40%',
        top: '1%',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      {
        text: '各级别投诉占比',
        left: '2%',
        top: '50%',
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      }
    ],
    grid: [{ left: '50%', top: '7%', width: '45%', height: '90%' }],
    tooltip: {
      formatter: '{b} ({c})'
    },
    xAxis: [
      {
        gridIndex: 0,
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        axisLine: { show: false }
      }
    ],
    yAxis: [
      {
        gridIndex: 0,
        interval: 0,
        data: yAxisData.reverse(),
        axisTick: { show: false },
        axisLabel: { show: true },
        splitLine: { show: false },
        axisLine: { show: true, lineStyle: { color: '#6173a3' } }
      }
    ],
    series: [
      {
        name: '各渠道投诉占比',
        type: 'pie',
        radius: '30%',
        center: ['22%', '25%'],
        data: [
          { value: 335, name: '客服电话' },
          { value: 310, name: '奥迪官网' },
          { value: 234, name: '媒体曝光' },
          { value: 135, name: '质检总局' },
          { value: 105, name: '其他' }
        ],
        labelLine: { show: false },
        label: {
          show: true,
          formatter: '{b} \n ({d}%)',
          color: '#B1B9D3'
        }
      },
      {
        name: '各级别投诉占比',
        type: 'pie',
        radius: '30%',
        center: ['22%', '75%'],
        labelLine: { show: false },
        data: [
          { value: 335, name: 'A级' },
          { value: 310, name: 'B级' },
          { value: 234, name: 'C级' },
          { value: 135, name: 'D级' }
        ],
        label: {
          show: true,
          formatter: '{b} \n ({d}%)',
          color: '#B1B9D3'
        }
      },
      {
        name: '投诉原因TOP10',
        type: 'bar',
        xAxisIndex: 0,
        yAxisIndex: 0,
        barWidth: '45%',
        itemStyle: { color: '#86c9f4' },
        label: { show: true, position: 'right', color: '#9EA7C4' },
        data: dataAll.sort()
      }
    ]
  })
})
</script>
